<%--
  Created by IntelliJ IDEA.
  User: xiaobao
  Date: 2024/12/26
  Time: 08:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="fmt" uri="jakarta.tags.fmt" %>

<style>
    /* 整体页面背景设置为浅灰色系，营造简洁科技感 */
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f5;
        margin: 0;
        padding: 0;
        color: #333;
    }

    /* 页面主容器，设置宽度、居中、内边距、背景色及轻微阴影效果 */
    .main-container {
        width: 60%;
        margin: 30px auto;
        padding: 20px;
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    /* 标题样式，字体大小、加粗、颜色及下边距 */
    h1 {
        font-size: 24px;
        font-weight: bold;
        color: #007bff;
        margin-bottom: 15px;
    }

    /* 表单样式 */
    form {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    /* 表单标签样式 */
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #333;
    }

    /* 表单输入框样式 */
    input[type="text"] {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-sizing: border-box;
        transition: border-color 0.3s ease;
    }

    input[type="text"]:focus {
        border-color: #007bff;
    }

    /* 只读输入框样式 */
    input[readonly] {
        background-color: #e9ecef;
        border-color: #ced4da;
        cursor: not-allowed;
    }

    /* 提交按钮样式 */
    input[type="submit"] {
        display: inline-block;
        text-decoration: none;
        padding: 10px 20px;
        border-radius: 3px;
        font-size: 16px;
        color: white;
        background-color: #28a745;
        transition: background-color 0.3s ease;
        margin-bottom: 10px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }

    input[type="submit"]:hover {
        opacity: 0.8;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    /* 返回按钮样式 */
    .back-button {
        display: inline-block;
        text-decoration: none;
        padding: 8px 16px;
        border-radius: 3px;
        font-size: 14px;
        color: white;
        background-color: #6c757d;
        transition: background-color 0.3s ease;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .back-button:hover {
        opacity: 0.8;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    }

    /* 错误提示信息样式 */
    .error-message {
        color: #dc3545;
        margin-bottom: 10px;
        font-size: 14px;
        display: none;
    }

    /* 按钮容器样式，使用 Flex 布局将按钮水平排列并添加间距 */
    .button-container {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
    }
</style>

<div class="main-container">
    <h1>修改商品类别信息</h1>
    <form action="category.action?action=update" method="post" id="updateForm">
        <!-- 显示商品类别 ID，但设置为只读，不允许修改 -->
        <label for="id">商品类别 ID</label>
        <input type="text" id="id" name="id" value="${category.id}" readonly>
        <span class="error-message" id="idError">商品类别 ID 不能为空</span>

        <label for="name">商品类别名称</label>
        <input type="text" id="name" name="name" value="${category.name}" required>
        <span class="error-message" id="nameError">商品类别名称不能为空，且长度不超过50个字符</span>

        <div class="button-container">
            <input type="submit" value="提交">
            <a href="supplier.action?action=list" class="back-button">返回</a>
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.getElementById('updateForm').addEventListener('submit', function (e) {
            var isValid = true;
            var id = document.getElementById('id').value;
            var name = document.getElementById('name').value;

            // 商品类别 ID 验证
            if (id === '') {
                document.getElementById('idError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('idError').style.display = 'none';
            }

            // 商品类别名称验证
            if (name === '') {
                document.getElementById('nameError').style.display = 'block';
                isValid = false;
            } else if (name.length > 50) {
                document.getElementById('nameError').innerHTML = "商品类别名称应简洁明了，长度不超过50个字符";
                document.getElementById('nameError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('nameError').style.display = 'none';
            }

            if (!isValid) {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: '输入错误',
                    html: errorMessages.join('<br>')
                });
            } else {
                e.preventDefault();
                //const formData = new FormData(this);
                var formData = $(this).serialize();
                $.ajax({
                    url: 'category.action?action=update',
                    type: 'POST',
                    data: formData,
                    //processData: false,
                    // contentType: false,
                    success: function (response) {
                        if (response.startsWith("修改成功")) {
                            Swal.fire({
                                icon: 'success',
                                title: '修改成功',
                                text: '商品种类信息修改成功'
                            }).then(function () {
                                window.location.href = 'supplier.action?action=list';
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: '修改失败',
                                text: response
                            }).then(function () {
                                window.location.reload();
                            })
                        }
                    },
                    error: function (xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: '请求出错',
                            text: '出现网络问题或服务器错误，请稍后再试'
                        });
                    }
                });
            }
        });
    </script>
</div>